<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视差滚动</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .scroll_box {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }
      .scroll_box .cur {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: url("images/GirlFriend01.jpg") center no-repeat;
        background-size: cover;
      }
      .scroll_box .prev,
      .scroll_box .next,
      .scroll_box .prev_,
      .scroll_box .next_ {
        overflow: hidden;
        position: absolute;
      }
      .scroll_box .prev {
        top: 0;
        width: 100%;
        height: 0;
        background: url("images/GirlFriend02.jpg") center no-repeat;
        background-size: cover;
      }
      .scroll_box .next {
        bottom: 0;
        width: 100%;
        height: 0;
        background: url("images/GirlFriend03.jpg") center no-repeat;
        background-size: cover;
      }
      .scroll_box .prev_ {
        left: 0;
        width: 0%;
        height: 100%;
        background: url("images/GirlFriend02.jpg") center no-repeat;
        background-size: cover;
      }
      .scroll_box .next_ {
        right: 0;
        width: 0%;
        height: 100%;
        background: url("images/GirlFriend03.jpg") center no-repeat;
        background-size: cover;
      }
      .scroll_box.up .prev,
      .scroll_box.down .next {
        height: 100%;
      }

      .scroll_box.right .prev_,
      .scroll_box.left .next_ {
        width: 100%;
      }
      .scroll_box.up .cur {
        transform: translateY(100%);
      }
      .scroll_box.left .cur {
        transform: translateX(-100%);
      }
      .scroll_box.right .cur {
        transform: translateX(100%);
      }
      .scroll_box.down .cur {
        transform: translateY(-100%);
      }

      .scroll_box > section {
        transition: width 1s, height 1s, transform 1s 0.1s;
      }
    </style>
  </head>
  <body>
    <div class="scroll_box">
      <section class="cur"></section>
      <section class="prev"></section>
      <section class="next"></section>
      <section class="prev_"></section>
      <section class="next_"></section>
    </div>
  </body>
  <script>
    let animationing = false;
    const container = document.querySelector(".scroll_box");
    const imgList = [
      "./images/1.png",
      "./images/2.jpg",
    ];
    let currentIndex = 0;
    const getPreIndex = () => {
      if (currentIndex === 0) {
        return imgList.length - 1;
      }
      return currentIndex - 1;
    };
    const getNextIndex = () => {
      if (currentIndex === imgList.length - 1) {
        return 0;
      }
      return currentIndex + 1;
    };
    const creatElemment = (index, className) => {
      let el = container.querySelector(className);
      if (!el) {
        el = document.createElement("section");
        el.classList.add(className);
      }
      el.style.backgroundImage = `url(${imgList[index]})`;
      return el;
    };
    const update = () => {
      container.appendChild(creatElemment(currentIndex, ".cur"));
      container.appendChild(creatElemment(getPreIndex(), ".prev"));
      container.appendChild(creatElemment(getNextIndex(), ".next"));
      container.appendChild(creatElemment(getPreIndex(), ".prev_"));
      container.appendChild(creatElemment(getNextIndex(), ".next_"));
    };
    update();
    let touch = { x: 0, y: 0 };
    window.addEventListener("touchstart", (event) => {
      touch.x = event.touches[0].clientX;
      touch.y = event.touches[0].clientY;
    });
    window.addEventListener("touchend", (event) => {
      touch.x = 0;
      touch.y = 0;
    });

    window.addEventListener("touchmove", (event) => {
      if (animationing || touch.y == 0) return;
      animationing = true;
      if (Math.abs(touch.x - event.touches[0].clientX) > Math.abs(touch.y - event.touches[0].clientY)) {
        if (touch.x - event.touches[0].clientX > 0) {
          container.classList.add("left");
          currentIndex = getNextIndex();
        } else {
          container.classList.add("right");
          currentIndex = getPreIndex();
        }
      } else {
        if (touch.y - event.touches[0].clientY > 0) {
          container.classList.add("down");
          currentIndex = getNextIndex();
        } else {
          currentIndex = getPreIndex();
          container.classList.add("up");
        }
      }
      touch.x = event.touches[0].clientX;
      touch.y = event.touches[0].clientY;
    });

    window.addEventListener("mousedown", (event) => {
      touch.x = event.clientX;
      touch.y = event.clientY;
    });
    window.addEventListener("mouseup", (event) => {
      touch.x = 0;
      touch.y = 0;
    });
    window.addEventListener("mousemove", (event) => {
      if (animationing || touch.y == 0) return;
      if (Math.abs(touch.x - event.clientX) < 250 && Math.abs(touch.y - event.clientY) < 250) return;
      animationing = true;
      if (Math.abs(touch.x - event.clientX) > Math.abs(touch.y - event.clientY)) {
        if (touch.x - event.clientX > 0) {
          container.classList.add("left");
          currentIndex = getNextIndex();
        } else {
          container.classList.add("right");
          currentIndex = getPreIndex();
        }
      } else {
        if (touch.y - event.clientY > 0) {
          container.classList.add("down");
          currentIndex = getNextIndex();
        } else {
          currentIndex = getPreIndex();
          container.classList.add("up");
        }
      }
      touch.x = event.clientX;
      touch.y = event.clientY;
    });
    window.addEventListener("wheel", (event) => {
      if (animationing) return;
      animationing = true;
      if (event.deltaY > 0) {
        container.classList.add("down");
        currentIndex = getNextIndex();
      } else {
        currentIndex = getPreIndex();
        container.classList.add("up");
      }
    });
    container.addEventListener("transitionend", (event) => {
      container.classList.remove("up");
      container.classList.remove("down");
      container.classList.remove("left");
      container.classList.remove("right");
      animationing = false;
      update();
    });
  </script>
</html>
